<template>
    <div class="student_distribution">
        <div class="top">
            <span>学生分布情况</span>
            <img style="margin-left: 10px;" src="../../assets/images/Combined Shape.png" alt="">
        </div>
        <div class="main">
            <div id="main" style="width: 100%;height:100%"></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
onMounted(() => {
    
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        xAxis: {
            type: 'category',
            data: ['14:51', '14:52', '14:53', '14:53', '14:57', '14:59',]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [720, 632, 601, 234, 621, 934],
                type: 'line',
                smooth: true
            },
            {
                data: [620, 552, 401, 205, 600, 910],
                type: 'line',
                smooth: true
            },
            {
                data: [520, 432, 301, 180, 590, 934],
                type: 'line',
                smooth: true
            },
            {
                data: [360, 400, 260, 204, 591, 934],
                type: 'line',
                smooth: true
            }
        ]
    };
    option && myChart.setOption(option);
})
</script>

<style scoped lang="scss">
.student_distribution {
    width: 100%;
    .top {
        width: 100%;
        height: 40px;
        background-image: url("../../assets/images/左.png");
        background-size: 100% 100%;
        color: #91a6ff;
        font-weight: bold;
        display: flex;
        align-items: center;
        font-size: 18px;

        span {
            text-indent: 20px;
        }
    }
    .main {
        width: 100%;
        height: 320px;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 10px;
    }
}
</style>